<template>
  <div class="course_wrap">
    <loader :loading="loading"></loader>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>教务系统</el-breadcrumb-item>
        <el-breadcrumb-item>课表查询</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="select_wrap">
        <!-- 查询成绩选项 -->
        <el-select class="select sw-item" v-model="year">
          <el-option label="--请选择要查询的学年--" value=""></el-option>
          <el-option label="2014-2015" value="2014"></el-option>
          <el-option label="2015-2016" value="2015"></el-option>
          <el-option label="2016-2017" value="2016"></el-option>
          <el-option label="2017-2018" value="2017"></el-option>
          <el-option label="2018-2019" value="2018"></el-option>
          <el-option label="2019-2020" value="2019"></el-option>
          <el-option label="2020-2021" value="2020"></el-option>
          <el-option label="2021-2022" value="2021"></el-option>
          <el-option label="2022-2023" value="2022"></el-option>
          <el-option label="2023-2024" value="2023"></el-option>
          <el-option label="2024-2025" value="2024"></el-option>
          <el-option label="2025-2026" value="2025"></el-option>
        </el-select>
        <el-select class="select sw-item" v-model="term">
          <el-option label="--请选择要查询的学期--" value=""></el-option>
          <el-option label="1" value="3"></el-option>
          <el-option label="2" value="12"></el-option>
        </el-select>
        <el-button @click="handleGetCourse" class="sw-item" type="primary" icon="el-icon-search" plain>查询</el-button>
        <el-button 
          @click="handleFull" 
          v-if="weeks.length > 0" 
          class="sw-item" 
          type="success" 
          icon="el-icon-full-screen"
          plain>
          课表全屏
        </el-button>
      </div>
      <div style="height: 100%" v-if="specialCourseList.length > 0 || weeks.length > 0">
        <div class="main_course">
          <!-- 主课表区域 -->
          <el-carousel 
            trigger="click" 
            :autoplay="false" 
            height="100%" 
            indicator-position="outside"
            class="swiper"
            >
            <el-carousel-item v-for="(item, index) in weeks" :key="index">
              <week-course :info="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="special_couse">
          <span class="special_title">实践课程：</span>
          <div class="special_content" v-for="item in specialCourseList">
            {{item.sjkcgs}}
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="没有内容哦~" />
      </div>
  </div>
</template>

<script>
  import Loader from '@/components/Loader'
  import WeekCourse from '@/components/home/education/Course/WeekCourse'
  // 网络请求模块
  import { loginEducation, getCourse } from '@/network/index'

  import reLogin from '@/assets/js/ReLogin'

  export default {
    name: 'Course',
    components: {
      Loader,
      WeekCourse
    },
    data() {
      return {
        loading: false,
        year: '',
        term: '',
        specialCourseList: [],
        weeks: []
      }
    },
    computed: {
      CASTGC() {
        return this.$store.state.CASTGC
      }
    },
    methods: {
      async handleGetCourse() {
        // 查询课表
        this.loading = true
        // 先判断是否已经获得了教务系统token
        let { jsessionId, sfCookie18 } = this.$store.state.Edu
        // 查询课表
        let res = await getCourse(jsessionId, sfCookie18, this.year, this.term)
        if(res.data.message === '查无数据') {
          this.specialCourseList = []
          this.weeks = []
        }else if(res.data.status === "ERROR") {
          let res1 = await loginEducation(this.CASTGC)
          if(res1.data.status === 'ERROR') {
            // 本地存储的token已失效，自动重新登录
            try{
              let CASTGC = await reLogin()
              this.$store.commit('handleLogin', CASTGC)
              res1 = await loginEducation(this.CASTGC)
            }catch(err) {
              this.$notify.error({
                title: '失败',
                message: '通行证失效，请尝试重新登录'
              })
              this.loading = false
              return
            }
          }
          jsessionId = res1.data.jsessionId
          sfCookie18 = res1.data.sfCookie18
          this.$store.commit('updateEdu', {jsessionId, sfCookie18})
          this.handleGetCourse()
        }else {
          this.specialCourseList = res.data.specialCourseList
          this.weeks = res.data.weeks
        }
        this.loading = false
      },
      // 课表全屏
      handleFull() {
        let swiper = document.getElementsByClassName('swiper')[0]
        swiper.requestFullscreen()
      }
    }
  }
</script>

<style >
  .course_wrap {
    position: relative;
    height: 100%;
  }

  .select_wrap {
    line-height: 70px;
    box-shadow: 0 3px 8px rgba(100, 100, 100, 0.1);
  }

  .course_wrap .swiper {
    height: 100%;
    width: 95%;
    margin: 20px auto;
  }

  .course_wrap .el-carousel__container {
    height: calc(100% - 26.4px) !important;
  }

  .sw-item {
    margin: 0 10px;
  }

  .course_wrap .main_course {
    /* 与滚动条拉开距离 */
    margin-right: 12px;
    height: 100%;
  }

  .special_title {
    font-weight: 600;
    color: lightsalmon;
    font-size: 20px;
  }

</style>